<!-- :) ctrl+a + ctrl+v -->
<template>
  <div id="app">
	
	<!-- v-model: 同双向绑定，富文本的值 -->
	<!-- setting: 富文本配置，请移步官方文档 -->
    <vue-tinymce
    v-model="content" 
    :setting="setting"
	/>
	
	<!-- test -->
	<h4>测试双向绑定: {{content}}</h4>
	
  </div>
</template>

<script>
export default {
	
  name: 'app',
  data(){
    return {
		
		// 富文本内容，可借助此为富文本进行初始化
		content: '<h1>Hello World!</h1>',
		
		// 编辑器菜单项/工具栏/宽高/水印/等等配置，这个还需要您自行了解
		// 菜单项/工具栏配置参考表格：https://blog.csdn.net/weixin_44198965/article/details/121909935?spm=1001.2014.3001.5501
		// 中文官方(大量配置): http://tinymce.ax-z.cn/
		setting: {
			language: 'zh_CN',//语言设置
			branding: false,//取消tinymce水印
			height:500,//编辑器高
			width: 800,//编辑器宽
			paste_word_valid_elements: '*[*]',//word粘贴使用
			toolbar_drawer: "sliding",//工具栏过多，点击“...”打开抽屉过度效果
			menubar: true,//是否显示菜单栏
			
			// 插件配置，例如引入一些插入图片/链接/预览/表格等等功能
			// 插件列表: https://blog.csdn.net/weixin_44198965/article/details/121909935?spm=1001.2014.3001.5501(所属插件为"核心"代表自带 无需在plugins引用 直接在toolbar使用即可)
			// 也可以使用字符串形式配置(空格隔开): plugins: 'lists code table colorpicker textcolor wordcount contextmenu preview fullscreen'
			// 默认全局引用，无需import！！！直接放入即可!
			plugins: [
				'lists', 'code', 'table', 'colorpicker', 'textcolor',
				'wordcount', 'contextmenu', 'preview', 'fullscreen'
			],
			
			// 编辑器工具栏配置，根据自己需要增减功能
			// 你可以使用plugins中配置的插件，也可以使用编辑器自带的"核心插件"
			// 同样可以参考https://blog.csdn.net/weixin_44198965/article/details/121909935?spm=1001.2014.3001.5501插件列表寻找"核心插件"
			// 配置项用空格隔开，每条 "|" 代表一个 "分割线"，你可以观察最终运行编辑器效果，便可得知这个分割线，
			
			toolbar:'code bold italic underline strikethrough table preview fullscreen | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | undo redo',
			// toolbar: "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
			
			// ↑↑↑↑ 给您配置了两个工具栏，您可注释另一个看看啥效果！
			
		}
    }
  }
}
</script>